<template>
    <el-menu :default-active="current_route" mode="vertical" @select="selectRouter" :collapse="store.state.menu.collapsed" class="xb-menu" router>
        <sub-menu :data="menu_data"></sub-menu>
    </el-menu>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import { useStore } from "vuex";
import { menu } from "../router/options";
import SubMenu from "./SubMenu.vue";

export default defineComponent({
    name: "Menu",
    setup() {
        const store = useStore();
        const menu_data = menu;
        const current_route = ref("");
        const selectRouter = (e: string) => {};
        const setCollapsed = () => {
            store.commit("SET_MENU_COLLAPSED");
        };
        return {
            selectRouter,
            menu_data,
            current_route,
            store,
            setCollapsed,
        };
    },
    watch: {
        "$route.fullPath": function (v) {
            this.current_route = v;
        },
    },
    methods: {},
    mounted() {
        this.current_route = this.$route.fullPath;
    },
    components: {
        SubMenu,
    },
});
</script>
